* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	border: 0;
}

body {
	height: 100%;
	width: 100%;
}

.head{
	padding: 10px 16px;
	height: 56px;
	margin-bottom: 20px;
	background: #fff;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .1);
	/* transform: scale(0.9); */
}
.head button{
	height: 36px;
	padding: 0 12px;
	border: none;
	border-radius: 4px;
}
.fbox{
	left: -20px;
}
.fbox,.fbox2 {
	position: relative;
	padding: 6px 16px;
	/* margin-left: 16px; */
	margin-top: 15px;
	width: 242px;
	height: 640px;
	background: url(../images/bg.png) #fff no-repeat;
	background-size: cover;
}
.fbox2{
    transform:scale(-1,1);
    position: absolute;
    top:56px;
    left: 700px;
}
.fbox2 .mask{
	position: absolute;
	top: 0;
	left: 0px;
	z-index: 9;
	width: 100%;
	height: 100%;
}
.fbox .mask{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
	width: 100%;
	height: 100%;
}

     
/* 
.data {
	border-radius: 20px;
	border: 1px solid #000;
	background: #fff;
} */



.none {
	background-color: rgba(0, 0, 0, 0);
	border: 0;
}




.Y15>.data18,
.Y15>.data17,
.Y15>.data16,
.Y15>.data15{top:18px}
.Y15>.data18{left: 82px;}
.Y15>.data17{left: 108px;}
.Y15>.data16{left: 134px;}
.Y15>.data15{left: 161px;}

.Y14>.data12,
.Y14>.data11,
.Y14>.data10,
.Y14>.data9,
.Y14>.data8,
.Y14>.data7{top:60px}
.Y14>.data12{left: 50px;}
.Y14>.data11{left: 77px;}
.Y14>.data10{left: 104px;}
.Y14>.data9{left: 131px;}
.Y14>.data8{left: 157px;}
.Y14>.data7{left: 183px;}

.Y13>.data0,
.Y13>.data1,
.Y13>.data2,
.Y13>.data3,
.Y13>.data4,
.Y13>.data5,
.Y13>.data6{top:97px}
.Y13>.data6{left: 33px;}
.Y13>.data5{left: 60px;}
.Y13>.data4{left: 86px;}
.Y13>.data3{left: 113px;}
.Y13>.data2{left: 141px;}
.Y13>.data1{left: 167px;}
.Y13>.data0{left: 194px;}

.Y12>.data27,
.Y12>.data26,
.Y12>.data25,
.Y12>.data24,
.Y12>.data23,
.Y12>.data22,
.Y12>.data21{top:135px}
.Y12>.data27{left:33px}
.Y12>.data26{left:60px}
.Y12>.data25{left:86px}
.Y12>.data24{left:113px}
.Y12>.data23{left:141px}
.Y12>.data22{left:167px}
.Y12>.data21{left:194px}

.Y11>.data20,
.Y11>.data19,
.Y11>.data18,
.Y11>.data17,
.Y11>.data16,
.Y11>.data15,
.Y11>.data14{top:174px}
.Y11>.data20{left:22px}
.Y11>.data19{left:50px}
.Y11>.data18{left:80px}
.Y11>.data17{left:109px}
.Y11>.data16{left:137px}
.Y11>.data15{left:165px}
.Y11>.data14{left:193px}

.Y10>.data13,
.Y10>.data12,
.Y10>.data11,
.Y10>.data10,
.Y10>.data9,
.Y10>.data8,
.Y10>.data7{top:214px}
.Y10>.data13{left:25px}
.Y10>.data12{left:53px}
.Y10>.data11{left:82px}
.Y10>.data10{left:112px}
.Y10>.data9{left:140px}
.Y10>.data8{left:166px}
.Y10>.data7{left:193px}

.Y09>.data6,
.Y09>.data5,
.Y09>.data4,
.Y09>.data3,
.Y09>.data2,
.Y09>.data1,
.Y09>.data0{top:254px}
.Y09>.data6{left:27px}
.Y09>.data5{left:53px}
.Y09>.data4{left:78px}
.Y09>.data3{left:104px}
.Y09>.data2{left:129px}
.Y09>.data1{left:156px}
.Y09>.data0{left:182px}

.Y08>.data27,
.Y08>.data26,
.Y08>.data25,
.Y08>.data24,
.Y08>.data23,
.Y08>.data22,
.Y08>.data21{top:291px}
.Y08>.data27{left:26px}
.Y08>.data26{left:51px}
.Y08>.data25{left:76px}
.Y08>.data24{left:101px}
.Y08>.data23{left:126px}
.Y08>.data22{left:150px}
.Y08>.data21{left:174px}

.Y07>.data20,
.Y07>.data19,
.Y07>.data18,
.Y07>.data17,
.Y07>.data16,
.Y07>.data15,
.Y07>.data14{top:333px}
.Y07>.data20{left:29px}
.Y07>.data19{left:53px}
.Y07>.data18{left:77px}
.Y07>.data17{left:101px}
.Y07>.data16{left:125px}
.Y07>.data15{left:148px}
.Y07>.data14{left:171px}

.Y06>.data13,
.Y06>.data12,
.Y06>.data11,
.Y06>.data10,
.Y06>.data9,
.Y06>.data8,
.Y06>.data7{top:377px}
.Y06>.data13{left:29px}
.Y06>.data12{left:53px}
.Y06>.data11{left:77px}
.Y06>.data10{left:101px}
.Y06>.data9{left:125px}
.Y06>.data8{left:148px}
.Y06>.data7{left:171px}

.Y05>.data6,
.Y05>.data5,
.Y05>.data4,
.Y05>.data3,
.Y05>.data2,
.Y05>.data1,
.Y05>.data0{top:421px}
.Y05>.data6{left:32px}
.Y05>.data5{left:55px}
.Y05>.data4{left:78px}
.Y05>.data3{left:101px}
.Y05>.data2{left:125px}
.Y05>.data1{left:148px}
.Y05>.data0{left:171px}

.Y04>.data27,
.Y04>.data26,
.Y04>.data25,
.Y04>.data24,
.Y04>.data23,
.Y04>.data22,
.Y04>.data21{top:463px}
.Y04>.data27{left:34px}
.Y04>.data26{left:57px}
.Y04>.data25{left:80px}
.Y04>.data24{left:103px}
.Y04>.data23{left:127px}
.Y04>.data22{left:150px}
.Y04>.data21{left:173px}

.Y03>.data20,
.Y03>.data19,
.Y03>.data18,
.Y03>.data17,
.Y03>.data16,
.Y03>.data15,
.Y03>.data14{top:507px}
.Y03>.data20{left:38px}
.Y03>.data19{left:60px}
.Y03>.data18{left:83px}
.Y03>.data17{left:107px}
.Y03>.data16{left:130px}
.Y03>.data15{left:153px}
.Y03>.data14{left:175px}

.Y02>.data13,
.Y02>.data12,
.Y02>.data11,
.Y02>.data10,
.Y02>.data9,
.Y02>.data8,
.Y02>.data7{top:549px}
.Y02>.data13{left:38px}
.Y02>.data12{left:60px}
.Y02>.data11{left:83px}
.Y02>.data10{left:107px}
.Y02>.data9{left:130px}
.Y02>.data8{left:153px}
.Y02>.data7{left:175px}

.Y01>.data5,
.Y01>.data4,
.Y01>.data3,
.Y01>.data2,
.Y01>.data1{top:586px}
.Y01>.data5{left:58px}
.Y01>.data4{left:83px}
.Y01>.data3{left:108px}
.Y01>.data2{left:133px}
.Y01>.data1{left:157px}










.data {
	position: absolute;
	width: 24px;
	height: 24px;
}


/* .foot{
	margin: 10px;
	display: flex;
	justify-content: space-around;
	width: 600px;
} */

.foot div,.region_data div{
	border: 1px solid black;
	padding: 5px;
}
.foot span,.region_data span{
	display: inline-block;
	width: 120px;
	margin: 0 5px;
	text-align: right;
}
.foot p,.region_data p{
	line-height: 24px;
	font-size: 24px;
	height: 24px;
	margin: 33px 0px;
	background-color: #fff;
}
.dataLeft{
	position: absolute;
	top: 100px;
	left: 240px;
}
.dataRight{
	position: absolute;
	top: 100px;
	left: 980px;
}

.region_data .dataLeft{
	position: absolute;
	top: 100px;
	left: 1540px;
}
.region_data .dataRight{
	position: absolute;
	top: 100px;
	left: 1980px;
}







/* .region1{
	background-color: #1D38C3;
}
.region2{
	background-color: #FF4C4F;
}
.region3{
	background-color: #fdec3d;
}
.region4{
	background-color: #73d13d;
}
.region5{
	background-color: #41a8ff;
}
.region6{
	background-color: #37cfca;
}
.region7{
	background-color: #ffa940;
}
.region8{
	background-color: #f75baa;
}
.region9{
	background-color: #9153de;
} */




.region_main,.region_1,.region_2,.region_3,.region_4,.region_5,.region_6,.region_7,.region_8,.region_9{
	position: absolute;
}
.region_main{
	z-index: 8;
	width: 242px;
	height: 640px;
	left: 0;
	top: 0;
}
.region_1{
	width: 139px;
	height: 185px;
	right: 0;
	bottom: 0;
	background: url(../images/r1_n.png) no-repeat;
	background-size: cover;
}
.region_2{
	width: 110px;
	height: 185px;
	left: 0;
	bottom: 0;
	background: url(../images/r2_n.png) no-repeat;
	background-size: cover;
}
.region_3{
	width: 141px;
	height: 171px;
	right: 0;
	top: 284px;
	background: url(../images/r3_n.png) no-repeat;
	background-size: cover;
}
.region_4{
	width: 101px;
	height: 171px;
	left: 0;
	top: 284px;
	background: url(../images/r4_n.png) no-repeat;
	background-size: cover;
}
.region_5{
	width: 88px;
	height: 195px;
	right: 0;
	top: 89px;
	background: url(../images/r5_n.png) no-repeat;
	background-size: cover;
}
.region_6{
	width: 91px;
	height: 195px;
	left: 75px;
	top: 89px;
	background: url(../images/r6_n.png) no-repeat;
	background-size: cover;
}
.region_7{
	width: 86px;
	height: 195px;
	left: 0;
	top: 89px;
	background: url(../images/r7_n.png) no-repeat;
	background-size: cover;
}
.region_8{
	width: 87px;
	height: 89px;
	right: 0;
	top: 0;
	background: url(../images/r8_n.png) no-repeat;
	background-size: cover;
}
.region_9{
	width: 163px;
	height: 126px;
	left: 0;
	top: 0;
	background: url(../images/r9_n.png) no-repeat;
	background-size: cover;
}





.foot .colorCircle,.region_data .colorCircle{
	display: inline-block;
	width: 24px;
	height: 24px;
	border-radius: 50%;
}
.region1 .colorCircle,.region1_2 .colorCircle{
	background-color: #1D38C3;
}
.region2 .colorCircle,.region2_2 .colorCircle{
	background-color: #FF4C4F;
}
.region3 .colorCircle,.region3_2 .colorCircle{
	background-color: #fdec3d;
}
.region4 .colorCircle,.region4_2 .colorCircle{
	background-color: #73d13d;
}
.region5 .colorCircle,.region5_2 .colorCircle{
	background-color: #41a8ff;
}
.region6 .colorCircle,.region6_2 .colorCircle{
	background-color: #37cfca;
}
.region7 .colorCircle,.region7_2 .colorCircle{
	background-color: #ffa940;
}
.region8 .colorCircle,.region8_2 .colorCircle{
	background-color: #f75baa;
}
.region9 .colorCircle,.region9_2 .colorCircle{
	background-color: #9153de;
}


.chart {
	width: 200px;
    grid-area: chart;
    padding: 50px;
    background: white;
    box-shadow: 2px 3px 10px rgba(0,0,0,.3)
}
.chart2 {
    grid-area: chart2;
    padding: 50px;
    background: white;
    box-shadow: 2px 3px 10px rgba(0,0,0,.3)
}


.chart_line{
	width: 100%;
	display: flex;
}


.heatmap_box{
	width: 100%;
	height: 500px;
	min-width: 1000px;
	display: flex;
	justify-content: baseline;
	margin: 80px;
}
.heatmap_box div{
	width: 500px;
	height: 500px;
	/* background-color: gray; */
	margin: 80px;
}

.left_map{
	background: url(../images/bg.png) no-repeat center;
	background-size: 50% 100%;
}

.right_map{
	background: url(../images/bg.png) no-repeat center;
	background-size: 50% 100%;
	transform:scale(-1,1);
}
.right_map_top,.right_map_middle,.right_map_buttom{
	transform:scale(-1,1);
}


.sum_data{
	width: 300px;
	height: 500px;
	position: absolute;
	left: 1500px;
	top: 100px;
	border: 1px solid black;
}

#chart-container,#chart-container2 {
	position: relative;
	height: 1500px;
	width: 1500px;
	overflow: hidden;
	margin-bottom: 500px;
	}